<template>
  <div class="wrapper">
    <el-dialog title="续费明细" width="1080"
               draggable
               v-model="dialogVisible"
               :before-close="closeHandle">
      <el-descriptions
        class="margin-top"
        title="订单总览"
        :column="3"
        border
      >
        <template #extra>
          <el-tag type="danger" style="font-size: 40px;margin-right: 5px;height: 40px;">{{orderData.indexId}}</el-tag>
          <el-tag style="font-size: 40px;margin-right: 5px;height: 40px">{{orderData.customName}}</el-tag>
          <el-button type="primary" style="font-size: 40px;height: 40px;" @click="setTotalPayHandle">设置总费用</el-button>
          <el-button type="primary" style="font-size: 40px;height: 40px;" @click="addPayDetailHandle">新增交易流水记录</el-button>
        </template>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon>
                <Coin/>
              </el-icon>
              总费用
            </div>
          </template>
          {{ orderData.orderAmount }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon>
                <Coin/>
              </el-icon>
              总尾款
            </div>
          </template>
          {{orderData.payPend}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon>
                <Coin/>
              </el-icon>
              总利润
            </div>
          </template>
          {{ orderData.profit }}
        </el-descriptions-item>
      </el-descriptions>
      <el-table :data="payDetailDataList" style="width: 100%" border stripe>
        <el-table-column
          v-for="column in columns"
          :key="column.prop"
          :prop="column.prop"
          :label="column.label"/>
        <el-table-column label="操作" width="190" fixed="right">
          <template v-slot="scope">
            <el-button @click="editPayDetailHandle(scope.row)" size="mini" style="font-size: 16px;">编辑</el-button>
            <el-button type="danger" @click="deletePayDetailHandle(scope.row.id)" size="mini" style="font-size: 16px;">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

    </el-dialog>
    <TotalPayModal ref="totalPaySetRef" @saveOk="initPage(orderData.id)"></TotalPayModal>
    <PayDetailModal ref="payDetailRef" @saveOk="initPage(orderData.id)"></PayDetailModal>
  </div>

</template>

<script lang="ts" setup>
import {ref} from "vue";
import {Coin} from '@element-plus/icons-vue'

const dialogVisible = ref(false)
const orderData = ref({})

import TotalPayModal from "./TotalPayModal.vue"
import PayDetailModal from "./PayDetailModal.vue"
import {getOrderDetailById} from "@/views/order/manager/pay/payApi";
import request from "@/config/axios";
import {getLabelByValue} from "@/api/enums";

const totalPaySetRef = ref({})
const payDetailRef = ref({})

const columns = ref([
  {prop: 'payDateTime', label: '交易日期', width: '350'},
  {prop: 'payType', label: '费用类型', width: '150'},
  {prop: 'payWay', label: '收款方式', width: '150'},
  {prop: 'payValue', label: '收款金额', width: '150'},
  {prop: 'rebateValue', label: '支出金额', width: '150'},
  {prop: 'roundUp', label: '摘要', width: '150'},
]);

const test = function (){
  console.log("触发了回调信息")
}


const initPage = async function (orderId) {
  const orderDetail = await getOrderDetailById(orderId)
  orderData.value = orderDetail
  console.log('---orderDetail---',orderDetail)
  payDetailDataList.value = orderDetail.payDetailList.map(item => {
    item.payWay = getLabelByValue('payWay', item.payWay)
    return item
  })
}


const payDetailDataList = ref([])
const closeHandle = function () {
  dialogVisible.value = false
}

const setTotalPayHandle = function () {
  totalPaySetRef.value.open(orderData.value)
}

const addPayDetailHandle = function () {
  payDetailRef.value.add({orderId: orderData.value.id})
}

const editPayDetailHandle = function (row) {
  payDetailRef.value.edit(row)
}

const deletePayDetailHandle = async function (id) {
  await request.delete({
    url: "/payDetail/deleteById",
    params: { id: id }
  })
  ElMessage.success("删除成功!")
  initPage(orderData.value.id)
}


defineExpose({
  open: (rowData) => {
    dialogVisible.value = true
    initPage(rowData.id);
  }
})

</script>


<style lang="scss" scoped>

</style>
